<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        action:提交数据到服务器，跳转页面
     -->
    <form action="success.html" method="get">
        用户名：<input id="username" type="text" name="username" placeholder="用户名长度不能超过5位" >
        <br>
        密码：<input id="password" type="password" name="password" placeholder="密码长度不能超过5位" >
        <br>
        <button type="button" onclick="login()">登录</button>
    </form>
    <script>
      
        function login(){
            //username是input输入框对象的值 value属性来获取输入框的值
            var username=document.getElementById("username").value;
            var password=document.getElementById("password").value;
            //用户名不能为空并且长度不能超过5位
            // 密码不能超过6位
            //字符串的length属性表示字符串的长度
            if(username.length>5 || username ==""){
                alert("当前用户名输入不合法");
                //结束整个方法
                return;
            }
            if(password.length>6 || password ==""){
                alert("当前密码输入不合法");
                return;
            }
            //匹配用户名和密码
            if(username == "dhl" && password=="12345"){
                //验证成功,跳转成功页面
                //事件：用户与浏览器之间的行为交互
                //点击、鼠标移入、鼠标移出
                //通过JS强制跳转页面
                alert("登录成功");
                window.location.href="success.html";
            }
        }
        // 当用户名输入框值改变时，就去判断值的合法性
        var username=document.getElementById("username");
        username.onchange=function(){
            var value=username.value;
            if(value.length>5 || value ==""){
                alert("当前用户名输入不合法");
                //结束整个方法
                return;
            }
        }
     //
     

    </script>
</body>
 
</html>